<template>
  <div class="flow-design">
    <template v-if="flowOpened">
      <FlowBar />
      <div class="container">
        <LogicFlow />
        <FlowPanel />
      </div>
    </template>
    <div class="empty" v-else>
      <img :src="imgUrl" alt="workflow" />
      <h3 class="text">流程可实现需要多人流转的业务场景</h3>
      <a-button @click="onOpenFlow">开启流程</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import FlowBar from '@/views/flowDesign/components/FlowBar.vue';
import LogicFlow from '@/views/flowDesign/components/LogicFlow.vue';
import FlowPanel from '@/views/flowDesign/components/FlowPanel.vue';
import imgUrl from '@/assets/imgs/flow/workflow.png';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'FlowDesign',
  components: {
    FlowBar,
    LogicFlow,
    FlowPanel,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const schemaCode: any = route.query?.schemaCode ?? '';
    schemaCode && store.dispatch('flowDesign/getFormData', schemaCode);
    const flowOpened = computed(() => store.state.flowDesign.flowOpened);
    const form = computed(() => store.state.flowDesign.form);
    const onOpenFlow = () => {
      const crads = form.value.formCards?.map(
        (it: any) => it.group !== 'layout',
      );
      if (!schemaCode) {
        return message.warning('缺少表单编码');
      }
      if (!crads?.length) {
        return message.warning('表单没有设置字段，请先设计表单');
      }
      store.dispatch('flowDesign/openFlow', schemaCode);
    };

    return {
      imgUrl,
      flowOpened,
      onOpenFlow,
    };
  },
});
</script>
<style lang="less" scoped>
.flow-design {
  height: calc(100vh - 48px);
  background-color: @rb-background-color;
  .container {
    .flexRow(flex-start, initial);
    width: 100%;
    height: calc(100% - 40px);
    padding: 12px 32px 0;
  }
  .empty {
    .flexColumn(center, center);
    position: absolute;
    left: 50%;
    top: 360px;
    transform: translate(-50%, 0);
    .text {
      margin: 16px 0;
      color: @rb-label-color;
    }
  }
}
</style>
